<template>
  <div>
    <div class="w-50">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm my_label"
      >
        <el-form-item label="用户名">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-radio-group v-model="ruleForm.sex" size="small">
          <el-radio border label="男"></el-radio>
          <el-radio border label="女"></el-radio>
        </el-radio-group>
        <el-form-item>
          <el-button type="primary" @click="addUser">提交</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
.w-50 {
  width: 50%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.my_label label {
  color: #fff !important;
}
.avatar-uploader .el-upload:hover {
  border-color: #fff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        mobile: "",
        email: "",
        password: "",
        sex: "",
      },
    };
  },
  methods: {
    // 重置表单
    reset() {
      alert("已清空");
      for (var k in this.ruleForm) {
        this.ruleForm[k] = "";
      }
    },
    // 发送请求添加商品
    addUser() {
      this.$axios
        .post(
          "/users/reg",
          `name=${this.ruleForm.name}&mobile=${this.ruleForm.mobile}&email=${this.ruleForm.email}&password=${this.ruleForm.password}}`
        )
        .then((res) => {
          console.log(res.data);
        });
    },
  },
  updated(){
      console.log(this.ruleForm.sex);
  }
};
</script>